<!DOCTYPE html>

<html>
<head>
{{template "common/head.html" .}}
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style type="text/css">
        #map-container {
            height: 100%;
            width: 100%;
        }
        #map-div{
            width: 500px;
            height: 300px;
        }
    </style>

</head>

<body class="layui-layout-body">
<div id="app">
    <div class="layui-layout layui-layout-admin">
    {{template "common/adminMenu.html" .}}

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="width: 100%; text-align: center;" id="oss-container" class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="title" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                    </div>
                </div>


                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">作品</label>
                    <div class="layui-input-block" style="text-align: left;">
                        <button class="layui-btn layui-btn-radius layui-btn-normal" id="selectfiles">上传照片/视频</button>
                        <div style="margin-top: 10px;">
                            <img v-if="type == 0" :src="showUrl" width="200px" />
                            <video v-if="type == 1" :src="showUrl" controls width="200px" />
                        </div>

                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">拍摄时间</label>
                    <div class="layui-input-block">
                        <input type="text" v-model="shootTime" name="date" id="date" lay-verify="date" placeholder="请选择拍摄时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">拍摄位置</label>
                    <div class="layui-input-block" style="text-align: left;">
                        <span v-text="address"></span>
                        <div id="map-div">
                            <div id="map-container"></div>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">是否公开</label>
                    <div class="layui-input-block" style="text-align: left;">
                        <input type="checkbox" lay-skin="switch" checked lay-filter="isShow" lay-text="公开|私有">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block" style="text-align: left;">
                        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="uploadPercent">
                            <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
                        </div>
                    </div>
                </div>

                    <button v-if="uploading == 0" @click="upload" class="layui-btn" style="float: left; margin-left: 110px;" id="btn-upload">&nbsp;&nbsp;&nbsp;&nbsp;开始上传&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    <button @click="modify" class="layui-btn" style="float: left; margin-left: 110px; display: none;" id="btn-modify">&nbsp;&nbsp;&nbsp;&nbsp;保存修改&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    <button id="postfiles" class="layui-btn" style="display: none;">&nbsp;&nbsp;&nbsp;&nbsp;开始上传&nbsp;&nbsp;&nbsp;&nbsp;</button>

            </div>
        </div>

    {{template "common/adminFooter.html" .}}
    </div>
</div>
</body>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.10&key=2d03add203d6e540257f4cfde44f2c7d&plugin=AMap.Geocoder"></script>
<script>
    var test = ""
    var data = {{ .data }};
    window.onload = function () {
        var m = document.getElementById("menu-product");
        var s = document.getElementById("menu-product-upload");
        m.parentElement.className = m.parentElement.className + " layui-nav-itemed";
        m.className = m.className + " menu-active";
        s.className = m.className + " layui-this";
    }
    var app = new Vue({
        el: '#app',
        data: {
            theme: 'ligth',
            type: -1, //0image 1video
            showUrl: '',
            title: '',
            shootTime: '',
            address: '',
            longitude: '',
            latitude: '',
            isShow: 0,
            uploading: 0,
        },
        mounted(){
            layui.use(['element','form'], function(){
                element = layui.element,
                form = layui.form;
                element.render();
                form.render();
                form.on('switch(isShow)', function(data){
                    if(this.checked){
                        app.isShow = 0;
                    }else{
                        app.isShow = 1;
                    }
                });
            });
            layui.laydate.render({
                elem: '#date',
                type: 'datetime',
                done: function (value, date, endDate) {
                    app.shootTime = value;
                }
            });

            initMap()

            this.$nextTick(function () {
                if(data != "" && data != null){
                    console.log(data);
                    console.log("----------");
                    app.type = data['Type'];
                    app.title = data['Title'];
                    app.showUrl = this.getUrl(data['Url'],data['Type']);
                    app.shootTime = data['ShootTime'];
                    app.address = data['Address'];
                    app.longitude = data['Longitude'];
                    app.latitude = data['Latitude'];
                    document.getElementById("selectfiles").style.display = "none";
                    document.getElementById("btn-upload").style.display = "none";
                    document.getElementById("btn-modify").style.display = "block";
                }
            });

        },
        methods: {
            upload() {
                if (isNull(app.title)) {
                    showMsg("请填写标题！");
                    return;
                }
                app.shootTime = document.querySelector("#date").value;
                if (isNull(app.shootTime)) {
                    showMsg("请选择拍摄时间！");
                    return;
                }
                if (isNull(app.address)) {
                    showMsg("请选择拍摄位置！");
                    return;
                }
                app.uploading = 1;
                document.querySelector("#postfiles").click();
            },
            getUrl(url, type) {
                if (type === 0) {
                    return "http://oss.longzongqin.cn/" + url + "?x-oss-process=image/resize,h_300";
                } else {
                    return "http://oss.longzongqin.cn/" + url;
                }

            },
            modify(){

            }
        }

    });
    function updateProcess(percent) {
        element.progress("uploadPercent", percent+"%");
    }
    function uploadOver(result, msg){
        if(!result){
            showMsg(msg);
        }else{
            showLoad();
            var param = {
                    'title': app.title,
                    'type': app.type,
                    'isShow': app.isShow,
                    'longitude': app.longitude,
                    'latitude': app.latitude,
                    'shootTime': app.shootTime,
                    'address': app.address,
                    'url': msg
            }
            console.log(param);
            axios.post("/admin/product/doUpload", param)
            .then(function (response) {
                hideLoad();
                element.progress("uploadPercent", "0%");
                if (response.data.code === 1) {
                    location.reload();
                } else {
                    showMsg(response.data.info)
                }
            })
        }
        app.uploading = 0;
    }
    function initMap(){
        // 创建地图实例
        var map = new AMap.Map("map-container", {
            zoom: 4,
            center: [108.780087,35.912404],
            resizeEnable: true
        });

        map.on( 'click',  function (e) {
            var marker = new AMap.Marker({
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                position: e.lnglat
            });
            map.clearMap();
            map.add(marker);
            app.longitude = e.lnglat.lng;
            app.latitude = e.lnglat.lat;

            var geocoder = new AMap.Geocoder();
            geocoder.getAddress(e.lnglat,function(status,result){
                if (status === 'complete' && result.regeocode) {
                    app.address = result.regeocode.formattedAddress;
                }else{
                    alert("你跑得太偏了");
                    app.address = "未知地址";
                }
            });

        });

    }

</script>
{{/*<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>*/}}
<script type="text/javascript" src="/static/aliyun-oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/static/aliyun-oss/upload.js"></script>
<script type="text/javascript" src="/static/js/exif.js"></script>
<script type="text/javascript" src="/static/js/uploadShow.js"></script>
</html>
